<template>
    <div class="product-dialog-container">
        <el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="800px">
            <el-form :model="state.productInfo" size="default" label-width="140px">
                <el-row :gutter="25">

                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="产品名称">
                            <el-input v-model="state.productInfo.name" clearable></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="一级品类">
                            <el-input v-model="state.productInfo.plOne" clearable></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="二级品类">
                            <el-input v-model="state.productInfo.plTwo" clearable></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="变体1">
                            <el-input v-model="state.productInfo.variantCodeOne" clearable></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="变体2">
                            <el-input v-model="state.productInfo.variantCodeTwo" clearable></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="供货商">
                            <el-select v-model="state.productInfo.vendorId" placeholder="选择供货商" filterable
                                @change="initVendorProductTypeOptions('change')" :filter-method="filterVendor" class="w100">
                                <el-option v-for="option in state.vendorOptions" :key="option.id" :label="option.name"
                                    :value="option.id" />
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="供货商产品类型">
                            <el-select v-model="state.productInfo.vendorProductTypeId" placeholder="选择供货商产品类型"
                                class="w100">
                                <el-option v-for="option in state.vendorProductTypeOptions" :key="option.id"
                                    :label="option.name" :value="option.id" />
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="产品长度单位">
                            <el-select v-model="state.productInfo.productUnit" placeholder="选择长度单位" clearable
                                class="w100">
                                <el-option label="厘米" value="CM"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="产品重量单位">
                            <el-select v-model="state.productInfo.weightUnit" placeholder="选择重量单位" clearable
                                class="w100">
                                <el-option label="千克" value="KG"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
                        <el-form-item label="计抛/计重">
                            <el-select v-model="state.productInfo.weightCalculate" placeholder="" clearable
                                class="w100">
                                <el-option label="计抛" :value="1"></el-option>
                                <el-option label="计重" :value="2"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                </el-row>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="onCancel" size="default">取 消</el-button>
                    <el-button type="primary" @click="onSubmit" size="default">{{ state.dialog.submitTxt }}</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts" name="maoriProductDialog">
import { reactive, ref } from 'vue';
import { useProductApi } from '/@/api/mainData/product';
import { useVendorApi } from '/@/api/mainData/vendor';
import { onMounted } from 'vue';

// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);

// 定义变量内容
const state = reactive({
    productInfo: {
        id: '',
        name: '', 					// 项目名称
        plOne: '', 					// 一级品类
        plTwo: '', 					// 二级品类
        variantCodeOne: '',			// 变体1
        variantCodeTwo: '',			// 变体2
        vendorId: '',
        vendorProductTypeId: '',
        productUnit: '',			// 产品长度单位
        weightUnit: '',				// 重量单位
        weightCalculate: 1,        // 计抛/计重
    },
    vendorOptions: [] as Vendor[],     // 供应商
    vendorProductTypeOptions: [] as VendorProductType[], //供货商产品类型
    dialog: {
        isShowDialog: false,
        type: '',
        title: '',
        submitTxt: '',
    },
});

// 引入 api 请求接口
const productApi = useProductApi();
const vendorApi = useVendorApi();

// 初始化供应商数据
async function initVendorOption() {
    const result = await vendorApi.queryAllVendorList()
    if (result.data == null)
        return Promise.resolve(true);
    const vendorList: Vendor[] = result.data.rows;
    state.vendorOptions = vendorList;
}

// 搜索供货商
const filterVendor = (query: string) => {
    state.vendorOptions = state.vendorOptions.filter((item) => {
        return item.name.toLowerCase().indexOf(query.toLowerCase()) > -1;
    })
}

// 变更供货商后
async function initVendorProductTypeOptions(operateType? :string) {
    if(operateType =="change"){
        state.productInfo.vendorProductTypeId = '';
    }
    if (null != state.productInfo.vendorId && '' != state.productInfo.vendorId) {
        const param = { vendorId: state.productInfo.vendorId }
        const result = await vendorApi.queryAllVendorProductTypeList(param);
        if (result.data == null)
            return Promise.resolve(true);
        const vendorProductTypeList: VendorProductType[] = result.data.rows;
        state.vendorProductTypeOptions = vendorProductTypeList;
    }
}

// 打开弹窗
async function openDialog(type: string, productId?: number) {
    if (type === 'edit') {
        const param = {
            'id': productId,
        }
        const result = await productApi.queryProductDetail(param);
        if (result.data.length <= 0)
            return Promise.resolve(true);

        const productDetail: Product = result.data;
        state.productInfo = productDetail;

        initVendorProductTypeOptions();

        state.dialog.title = '修改产品';
        state.dialog.submitTxt = '修 改';
    } else {
        state.dialog.title = '新增产品';
        state.dialog.submitTxt = '新 增';
        clearProductInfo();
    }
    state.dialog.type = type;
    state.dialog.isShowDialog = true;
};

// 清除表单信息
const clearProductInfo = () => {
    state.productInfo = {
        id: '',
        name: '',
        plOne: '',
        plTwo: '',
        variantCodeOne: '',
        variantCodeTwo: '',
        productUnit: '',
        weightUnit: '',
        vendorId: '',
        vendorProductTypeId: '',
        weightCalculate: 1,
    };
}

// 关闭弹窗
const closeDialog = () => {
    state.dialog.isShowDialog = false;
};

// 取消
const onCancel = () => {
    closeDialog();
};

// 提交
async function onSubmit() {
    await productApi.editProduct(state.productInfo);
    closeDialog(); // 关闭弹窗
    emit('refresh');
};

// 页面加载时
onMounted(() => {
    initVendorOption();
});

// 暴露变量
defineExpose({
    openDialog,
});
</script>